<!DOCTYPE html>
<html>
{% include './www/header.html' %}

<style>
    /* 页面容器 */
    .page-container {
        min-height: calc(100vh - 120px); /* 减去header和footer的高度 */
        padding: 2rem;
        background: #f8f9fa;
    }

    /* 卡片样式 */
    .api-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        margin-bottom: 2rem;
    }

    /* 标题样式 */
    .card-header {
        padding: 1.5rem 2rem;
        border-bottom: 1px solid #f0f2f5;
    }

    .card-title {
        font-size: 1.5rem;
        color: #333;
        margin: 0;
        font-weight: 500;
    }

    /* 表格容器 */
    .card-body {
        padding: 1.5rem;
    }

    /* 表格样式优化 */
    .layui-table {
        margin: 0;
    }

    .layui-table thead tr {
        background: #f8f9fa;
    }

    .layui-table th {
        font-weight: 500;
        color: #333;
    }

    .layui-table td, .layui-table th {
        padding: 12px 15px;
    }

    /* URL列样式 */
    .url-cell {
        font-family: monospace;
        background: #f5f7fa;
        padding: 4px 8px;
        border-radius: 4px;
    }

    /* 方法标签样式 */
    .method-tag {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .method-get {
        background: #e1f5fe;
        color: #0288d1;
    }

    .method-post {
        background: #e8f5e9;
        color: #388e3c;
    }

    /* 响应式调整 */
    @media screen and (max-width: 768px) {
        .page-container {
            padding: 1rem;
        }

        .card-header {
            padding: 1rem;
        }

        .card-body {
            padding: 1rem;
        }
    }
</style>

<div class="page-container">
    <div class="api-card">
        <div class="card-header">
            <h2 class="card-title">API 信息列表</h2>
        </div>
        <div class="card-body">
            <table id="api-dataTable" lay-filter="api-dataTable"></table>
        </div>
    </div>
</div>

{% include './www/footer.html' %}

<script>
    layui.use(['form', 'jquery', 'table', 'layer'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let table = layui.table;
        let layer = layui.layer;

        let MODULE_PATH = "{{ url_for('api.list') }}";

        let cols = [
            [
                { 
                    field: 'id', 
                    title: 'ID', 
                    sort: true, 
                    align: 'center', 
                    width: 80 
                },
                { 
                    field: 'name', 
                    title: 'API名称', 
                    align: 'left',
                    width: 150
                },
                { 
                    field: 'url', 
                    title: 'URL', 
                    align: 'left',
                    templet: function(d){
                        return '<span class="url-cell">' + d.url + '</span>';
                    }
                },
                { 
                    field: 'method', 
                    title: '请求方法', 
                    align: 'center',
                    width: 100,
                    // templet: function(d){
                    //     return '<span class="method-tag method-' + d.method.toLowerCase() + '">' + d.method + '</span>';
                    // }
                },
                { 
                    field: 'params', 
                    title: '参数', 
                    align: 'left' 
                },
                { 
                    field: 'return', 
                    title: '返回格式', 
                    align: 'left' 
                },
                { 
                    field: 'desc', 
                    title: '描述', 
                    align: 'left' 
                }
            ]
        ];

        // 发起请求加载数据
        $.ajax({
            url: MODULE_PATH,
            dataType: 'json',
            type: 'get',
            beforeSend: function() {
                loading = layer.load(2); // 使用更好看的加载动画
            },
            success: function (result) {
                layer.close(loading);
                if (result.code === 200) {    
                    let data = result.data;
                    let host = window.location.host;
                    data.forEach(function(item) {
                        item.url = host + item.url;
                    });
                   
                    table.render({
                        elem: '#api-dataTable',
                        data: data,
                        cols: cols,
                        skin: 'line',
                        even: true, // 开启隔行背景
                        size: 'lg', // 更大的尺寸
                        limit: 20, // 每页显示数量
                        limits: [10, 20, 50, 100],
                        page: true, // 开启分页
                        text: {
                            none: '暂无相关数据' // 空数据提示
                        }
                    });
                }
            },
            error: function (xhr, status, error) {
                layer.close(loading);
                layer.msg('请求失败，请稍后重试', { icon: 2, time: 2000 });
            }
        });

        // 刷新表格
        window.refresh = function () {
            table.reload('api-dataTable');
        };
    });
</script>
</html>